<template>
  <div class="mask-popover" :uid="$.uid">
    <div @click="visibleContent = true"><slot></slot></div>
    <transition name="anim-design">
      <div class="popover-plain" v-if="visibleContent">
        <slot name="content"></slot>
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data: function() {
    return {
      visibleContent: false
    };
  },
  mounted() {
    window.addEventListener("click", this.windowOnClick);
    // console.log("[MaskPopover]", this.$.uid);
  },
  beforeUnmount() {
    window.removeEventListener("click", this.windowOnClick);
  },
  methods: {
    windowOnClick(ev) {
      // console.log("[windowOnClick]", this.$.uid, ev.uid, ev);
      let isSelf = ev.path.find((item) => {
        // if (item.className === "mask-popover") {
        //   console.log("[isSelfDom]", this.$.uid, item);
        // }
        return item.className === "mask-popover" && item.getAttribute("uid") == this.$.uid;
      });
      if (!isSelf) {
        this.visibleContent = false;
      }
    }
  }
};
</script>
<style>
.mask-popover {
  position: relative;
  /* margin-right: 0px; */
}
.popover-plain {
  flex-grow: 1;
  position: absolute;
  top: 100%;
}
</style>
